<template>
  <view class="container">
    <view class="header"></view>
    <view class="content">
      <view class="preview">
        <div
          class="protected-image"
          :style="{ backgroundImage: `url(data:image/png;base64,${previewSrc})` }"
        >
        </div>
      </view>
      <view class="detil">
        <view class="detil_name">
          <view class="aiName">
            {{ imgName ? imgName : $t('generate.modelPreview') }}
          </view>
          <view class="" style="color: red"> {{ $t('generate.yuan') }}{{ price }} </view>
        </view>
        <view class="button_box" @tap="handlePrint"> {{ $t('generate.sendPrint') }} </view>
      </view>
    </view>
  </view>
</template>

<script>
  import GenerateApi from '@/sheep/api/generate/aiGenerate';
  import OrderApi from '@/sheep/api/trade/order';
  import sheep from '@/sheep';

  export default {
    data() {
      return {
        previewSrc: '',
        imgSrc: '',
        imgName: '',
        price: 0,
        skuId: '',
        categoryId: null,
        printType: null,
        blobUrl: '',
        from: null, //从首页进来值就是index
      };
    },
    onLoad(options) {
      this.from = options.from;
      this.imgSrc = uni.getStorageSync('printSrc');
      this.imgName = uni.getStorageSync('printName');
      this.categoryId = uni.getStorageSync('categoryId');
      this.printType = uni.getStorageSync('printType');
      this.getImg();
      this.getPrice();
    },
    methods: {
      async getImg() {
        if (this.from) {
          this.previewSrc = this.imgSrc;
        } else {
          const { code, data } = await GenerateApi.getAiModel({
            images: this.imgSrc,
            printType: this.printType,
          });
          if (code === 200) {
            this.previewSrc = data;
          }
        }
      },
      async getPrice() {
        let deviceId = uni.getStorageSync('equipmentId');
        const { code, data } = await GenerateApi.getModePrice(deviceId ? deviceId : null);
        if (code === 0) {
          this.price = data.price / 100;
          this.skuId = data.id;
        }
      },
      async handlePrint() {
        //获取设备信息
        let deviceNumber = uni.getStorageSync('equipmentId');
        const deviceInfo = await sheep.$store('device').getDeviceInfo();
        if ((deviceInfo.type === 'test' || deviceInfo.type === 'marketing_test')&&deviceInfo.testLic>0) {
          const { code, data } = await OrderApi.gcodeTest({
            deviceSerialNumber: deviceNumber ? deviceNumber : '',
            imageBase64: this.printType === 'category' ? this.categoryId : this.previewSrc,
            categoryId: this.categoryId,
            printType: this.printType,
          });
          if (code === 0 && data === true) {
            uni.showToast({
              title: this.$t('generate.testSuccess'),
              duration: 2000,
            });
            sheep.$router.redirect('/pages/index/index');
          }
        } else {
          let list = [];
          list.push({
            skuId: this.skuId,
            count: this.price,
          });
          const { code, data } = await OrderApi.createOrder({
            items: list,
            deliveryType: 2, // TODO 芋艿：需要支持【门店自提】
            pointStatus: false, // TODO 芋艿：需要支持【积分选择】
            deviceNumber: deviceNumber ? deviceNumber : '',
            printImage: this.printType === 'category' ? this.categoryId : this.previewSrc,
            categoryId: this.categoryId,
            printType: this.printType,
          });
          if (code === 0) {
            sheep.$router.redirect('/pages/pay/index', {
              id: data.payOrderId,
            });
          }
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .header {
    width: 100%;
    height: 150px;
    background-image: url('../../static/header.gif');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .content {
    width: 90%;
    height: 100vh-15;
    border-radius: 10px;
    background-color: #fff;
    margin: -50px auto;
    display: flex;
    flex-direction: column;

    .preview {
      width: 100%;
      height: 70%;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;

      .protected-image {
        width: 100%;
        height: 100%; /* 与原image元素保持一致 */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      image {
        border-radius: 10px;
        // width: 100%;
        // height: 70%;
      }
    }

    .detil {
      // width: 100%;
      // padding: 25px;
      // height: 30%;
      // border-top-left-radius: 10%;
      // border-top-right-radius: 10%;
      // background-color: #61A7E5;

      .detil_name {
        width: 90%;
        height: 60px;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        background-color: #f3f3f3;
        color: #000;
        font-size: 18px;
        font-weight: bold;
        margin: 0 auto;

        .aiName {
          width: 200px;
          height: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .button_box {
        width: 70%;
        height: 60px;
        margin: 25px auto;
        background-color: #f9e056;
        border-radius: 20px;
        color: #83320d;
        font-size: 25px;
        text-align: center;
        line-height: 60px;
        letter-spacing: 5px;
      }
    }
  }
</style>
